<h1 style="text-align: center">任务监控</h1>
<div class="container" style="margin-top: 20px;">
    <div id="dashboard" class="row">
    </div>
</div>
<script>
    $(function () {
        const statusObj = {
            '等待运行': 'panel-default',
            '运行中': 'panel-info',
            '成功': 'panel-success',
            '失败': 'panel-danger'
        }

        $.get('/api/jobHistory/findGroupByStatus', function (result) {
            if (result.success) {
                const data = result.data
                for (let index = 0; index < data.length; index++) {
                    const element = data[index];
                    const clazz = statusObj[element.status]
                    const html = [
                        '<div class="col-md-6">',
                        '<div class="panel ',
                        clazz,
                        '">',
                        '<div class="panel-heading">',
                        element.status,
                        '</div>',
                        '<div class="panel-body">',
                        element.count,
                        '</div>',
                        '</div>',
                        '</div>',
                        '</div>'
                    ].join('')
                    $('#dashboard').prepend(html)
                }
            } else {
                toastr.error(result.message)
            }
        }, 'json')
    })
</script>